<template>
	<view class="content">
		<view class="top_box">
			<view class="title">
				 {{ over ? '拼团已结束' : '距离结束还剩'}}
			</view> 
			<countdown-timer v-if="!over" ref="countdownTimer" @timeUp="timeUp"/>
		</view>
		
		<view class="goods_item" v-if="product">
			<view class="image">
				<image :src="product.pic" mode="aspectFill"></image>
				<!-- <view class="us">
					<image src="/static/logo.png" mode=""></image>
					<text>5分钟前参与拼单</text>
				</view> -->
			</view>
			<view class="text">
				<button  open-type="share" class="share">
					<image src="/static/t.png" mode=""></image>
				</button>
				<view class="title">
					{{product.name}}
				</view>
				<view class="progress">
					<view class="line-progress">
						<u-line-progress height="17" :percentage="getProgress()" activeColor="#020202"></u-line-progress>
					</view>
					<text>已购{{infoData.involved}}件</text>
				</view>
				<view class="sd">
					<view class="left">
						<view class="price">
							￥{{infoData.groupPrice}}
						</view>
						<text v-if="product.price != infoData.groupPrice">商城价 ￥{{product.price}}</text>
						<text>公益金：1元</text> 
					</view>
					<!-- <button class="btn">
						去拼单
					</button> -->
				</view>
			</view>
		</view>
		
		<view class="user_box" v-if="infoData && infoData.groupDetails.length">
			<view class="title">
				<text v-if="infoData.groupDetails.length > 11">超过</text>{{infoData.groupDetails.length}}人参与了该团购
			</view>
			<view class="ubox"> 
					<view class="img"  v-for="(item,index) in infoData.groupDetails" :key="item.id">
						<image v-if="index < 11"  :src="item.pic" mode=""></image>
					</view>  
				<image src="/static/mm.png" v-if="infoData.groupDetails.length > 11"  mode="" class="mm"></image> 
			</view>
		</view>
		
		<view class="goodsDetail">
			<u-parse :content="product.detailMobileHtml" :tagStyle="style"></u-parse>
		</view>
		<view class="zw" :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			
		</view>
		<view class="goodsBottomBtn"  :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			<view class="left"> 
				<button open-type="contact"  class="item contact">
					 <image src="/static/w1.png" mode=""></image>
				</button> 
			</view>
			<view class="right"> 
				<view class="btn2" @click="handleSubmit">
					立即参与
				</view>
			</view>
		</view> 
		
	</view>
</template>

<script>
	import CountdownTimer from '@/components/countdown-timer.vue'
	export default{
		 components: {
		    CountdownTimer
		  },
		data(){
			return{
				over:false,
				id:'', 
				product:'',
				content:'123',
				infoData:'',
				bottomPadding:0,
				style: { 
					p: 'color: #545454;font-size:32rpx;line-height:44rpx;margin-bottom:20rpx',
					span: 'font-size: 30rpx',
					img:'width:100% !important;height:auto !important;display:block'
				},
			}
		},
		
		onShareAppMessage: function (res) {
		   return { 
				imageUrl:this.product.pic,
				title:`${this.userInfo.nickname}邀请您拼单`,
				path: `/pagesA/group/detail?id=${this.id}`
		   };
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo 
			}
		},
		onLoad(option) {   
			this.id = option.id
			this.bottomPadding = uni.getStorageSync('bottomPadding') 
			this.getDetail()
		},
		
		methods:{
			getProgress(){ 
				return this.infoData.involved / this.infoData.miniNum > 1?100:(this.infoData.involved / this.infoData.miniNum)*100
			},
			
			handleSubmit(type){
				if (!this.checkForLogin()) {
					return;
				}
				this.handleToBuy()
			},
			//检查登录状态并弹出登录框
			checkForLogin() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '你还没登录，是否要登录？',
						confirmText: '去登录',
						cancelText: '取消',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				} else {
					return true;
				}
			},
			timeUp(){
				this.over = true
			},
			handleToBuy(){
				this.$http({
					url:"/order/groupGenerateConfirmOrder",
					data:{
						groupId:this.id
					}
				}).then(data=>{
					const info = JSON.stringify(data)
					uni.setStorageSync('confirmOrderInfo',info)
					 
					uni.navigateTo({
						url:`./submitOrder?groupId=${this.id}`
					})
				})
			},
			getDetail(){
				this.$http({
					url:"/pmsGroupConfig/queryById",
					method:"get",
					data:{
						id:this.id
					}
				}).then(data=>{
					this.infoData = data
					this.product = data.product
					this.$refs.countdownTimer.endTime = data.endTime
					          // 重新开始倒计时
					 this.$refs.countdownTimer.startCountDown()
				})
			}, 
		}
	}
</script>

<style lang="scss" scoped>
	.zw{
		height: 80rpx;
		padding: 30rpx;
	}
	.goodsBottomBtn{
		background: #fff;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(10,17,24,0.06);
		.right{
			display: flex;
			.btn1{
				width: 240rpx;
				height: 80rpx;
				border-radius: 50rpx;
				border: 1rpx solid #020202;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #020202;
			}
			.btn2{
				width: 240rpx;
				height: 80rpx;
				background: #020202;
				border: 1px solid #020202;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				margin-left: 24rpx;
				font-size: 30rpx;
			}
		}
		.left{
			display: flex;
			align-items: center;
			.contact{
				padding: 0;
				background: none;
				&::after{
					border: none;
				}
			}
			.item{
				&:first-child{
					margin-right: 30rpx;
				}
			}
			image{
				display: block;
				width: 62rpx;
				height: 62rpx;
			}
		}
	}
	.content{
		padding: 24rpx;
		box-sizing: border-box;
		.goodsDetail{
			margin-top: 32rpx;
		}
		.user_box{
			width: 100%;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 2rpx dashed #020202;
			padding: 32rpx 30rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.ubox{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				.mm{ 
					width: 76rpx;
					height: 76rpx;
					display: block;
				}
				.img{
					image{
						display: block;
							width: 76rpx;
							height: 76rpx;
							border: 1px solid #333;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 26rpx;
							margin-bottom: 26rpx;
							&:nth-child(6n){
								margin-right: 0;
							}
					}
				}
			}
		}
		.goods_item{
			background: #F8F8F8;
			padding: 24rpx;
			margin-bottom: 34rpx;
			.text{
				padding-top: 24rpx;
				position: relative;
				.share{
					position: absolute;
					right: 0rpx;
					top: 24rpx;
					width: 40rpx;
					height: 40rpx;
					padding: 0;
					&::after{
						border: none;
					}
					image{
						
						width: 40rpx;
						height: 40rpx;
						display: block;
					}
				}
				.title{
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
					padding-right: 60rpx;
					box-sizing: border-box;
				} 
				.sd{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					.btn{
						width: 160rpx;
						height: 64rpx;
						background: #020202;
						border-radius: 50rpx;
						text-align: center;
						line-height: 64rpx;
						color: #fff;
						font-size: 24rpx;
						margin: 0;
						&::after{
							border: none;
						}
						&.disabled{
							background: rgba(2, 2, 2, 0.20);
						}
					}
					.left{
						display: flex;
						align-items: center;
						.price{
							font-size: 40rpx;
							font-weight: bold;
						}
						text{
							font-size: 26rpx;
							color: #666666;
							margin-left: 20rpx;
						}
					}
				}
				.progress{
					display: flex;
					align-items: center;
					.line-progress{
						width: 368rpx;
					}
					text{
						font-size: 24rpx;
						color: #666;
						margin-left: 30rpx;
					}
				}
			}
			.image{
				position: relative;
				.over{
					position: absolute;
					width: 100%;
					height: 431rpx;
					background: rgba(0,0,0,0.4);
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 40rpx;
				}
				.us{
					width: 244rpx;
					height: 64rpx;
					background: rgba(0,0,0,0.3);
					border-radius: 32rpx;
					position: absolute;
					left: 30rpx;
					bottom: 30rpx;
					padding: 4rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					text{
						font-size: 20rpx;
						color: #fff;
					}
					image{
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						display: block;
						margin-right: 10rpx;
					}
				}
				image{
					width: 100%;
					height: 450rpx;
					display: block;
				}
			}
		}
		
		
		.top_box{
			background: rgba(248, 248, 248, 1);
			height: 222rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			padding-bottom: 40rpx;
			.title{
				text-align: center;
				font-size: 36rpx;
				color: #020202;
				font-weight: bold;
			}
		
		}
	}
</style>